<template>
  <a-spin :spinning="confirmLoading">
    <div class="container">
      <div class="auto">
        <div class="pub_tit clearfix wow fadeInDown animated" data-wow-delay="0.1s">
          <em class="bt">作品信息</em>
          <!-- <a href="#" class="pub_back fr">返回</a> -->
          <a-icon style="float: left; margin-top: 16px; margin-right: 8px; cursor: pointer" type="rollback" @click="goBack"/>
          <a-button style="float: right" @click="handleDelete" v-if="isShowBtnPersson()">删除</a-button>
          <a-button style="float: right; margin-right: 5px;" type="primary" @click="editStaff" v-if="isShowBtnPersson()">编辑</a-button>
        </div>
        <div class="mem_det clearfix">
          <div class="mem_l fl wow fadeInLeft animated" data-wow-delay="0.1s">
            <div class="info">
              <img :src="worksDetail.worksImg" alt="" class="pic"/>
              <h6 class="name">{{worksDetail.worksName}}</h6>
            </div>
<!--            <div class="txt">-->
<!--              <p>{{worksDetail.worksIntroduce}}</p>-->
<!--            </div>-->
          </div>
          <div class="mem_r wow fadeInRight animated" data-wow-delay="0.1s">
            <div class="mem_mod">
              <h6 class="t_tit">作品描述</h6>
              <div class="txt">
                <p v-html="worksDetail.worksIntroduce"></p>
              </div>
            </div>
            <div class="mem_mod">
              <h6 class="t_tit">关键词</h6>
              <div class="tags">
                <a href="javascript:void(0);" class="tg" v-for="(item, index) in topicnames" :key="index">{{item}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script>
import '../../../public/css/style.css'
import { getAction, postAction  } from '@/api/manage'
import { isShowBtn } from "@/utils/authFilter"
export default {
  name: 'StaffAndWorkersDetail',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      confirmLoading: false,
      worksDetail: {},
      topicnames: []
    }
  },
  created() {
    this.getWorksDetail()
  },
  methods: {
    isShowBtnPersson() {
      return isShowBtn()
    },
    goBack() {
      this.$router.go(-1)
    },
    getWorksDetail() {

      let self = this
      this.confirmLoading = true
      let url = '/works/info/' + this.$route.query.worksId
      getAction(url, {}).then(res => {
        if(res.code == 0) {

          self.worksDetail = Object.assign({}, res.result)
          console.log(self.worksDetail)
          if(res.result.topic) {
            self.topicnames = [...res.result.topic.split('，')]
          }
        } else {
          self.$message.error(res.msg)
        }
      }).finally(() => {
        self.confirmLoading = false
      })
    },
    handleDelete() {
      let self = this
      this.$confirm({
        title: '确认要删除此作品?',
        onOk() {
          self.confirmLoading = true
          postAction('/works/delete', {ids: self.$route.query.worksId}).then(res => {
            if(res.code == 0) {
              self.$message.success(res.msg)
              self.$router.go(-1)
            } else {
              self.$message.error(res.msg)
            }
          }).finally(() => {
            self.confirmLoading = false
          })
        },
        onCancel() {
        }
      })
    },
    editStaff() {
      this.$router.push({path: '/worksShow/addWork', query: {worksId: this.$route.query.worksId}})
    }
  }
};
</script>

<style scoped>
</style>
